<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>符嘉月</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="nav-card">
        <div class="nav-container">
            <a href="#education">📖 教育</a>
            <a href="#projects">💻 项目</a>
            <a href="#skills">🛠️ 技能</a>
            <a href="#contact">📱 联系</a>
        </div>
    </nav>

    <div class="control-bar" style="text-align: center; margin: 20px 0;">
        <form method="POST" class="url-form" style="display: inline-block;">
            <input type="url" name="url" placeholder="输入简历URL" required 
                   style="padding: 8px; width: 300px; border: 2px solid #FF6B35;">
            <button type="submit" 
                    style="background: #FF6B35; color: white; border: none; padding: 8px 16px;">
                加载简历
            </button>
            
            {% if resume_data and 'photo' in resume_data %}
            <button type="button" 
                    onclick="resetResume()"
                    style="background: #666; color: white; border: none; padding: 8px 16px; margin-left: 10px;">
                返回我的简历
            </button>
            {% endif %}
        </form>
    </div>
    
    <!-- 修复后的页眉带照片 -->
    <header class="header-frame">
        <div class="profile-container">
            {% if resume_data.photo %}
            <img src="{{ resume_data.photo }}" 
                 onerror="this.src='{{ url_for('static', filename='images/default.jpg') }}'"
                 alt="简历照片"
                 class="profile-photo">
            {% else %}
            <img src="{{ url_for('static', filename='images/profile.jpg') }}" 
                 alt="默认照片"
                 class="profile-photo">
            {% endif %}
            <div>
                {% if resume_data.name %}
                <h1>{{ resume_data.name }}</h1>
                {% else %}
                <h1>符嘉月</h1>
                {% endif %}
                {% if resume_data.objective %}
                <p>{{ resume_data.objective }}</p>
                {% else %}
                <p>求职意向：Web前端开发工程师 | 期望薪资 8k-10k</p>
                {% endif %}
                <div class="status-badge">⌛ 30天内到岗</div>
            </div>
        </div>
    </header>

    <main class="container">
        <!-- 消息提示容器 -->
        <div class="alert-container">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                    <div class="alert alert-{{ category }} animate-fadein">
                        {{ message }}
                        {% if category == 'error' %}
                        <small class="error-details">
                            常见原因：<br>
                            1. 网页需要登录<br>
                            2. 包含验证码限制<br>
                            3. 非标准简历结构
                        </small>
                        {% endif %}
                    </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>

        <!-- 教育背景 -->
        <section id="education" class="info-card">
            <h2 class="section-title">🎓 教育背景</h2>
            <div class="content-frame main-border">
                {% if resume_data.education %}
                    {{ resume_data.education|safe }}
                {% else %}
                <div class="timeline-item">
                    <h3>海南经贸职业技术学院</h3>
                    <div class="detail-box">
                        <span class="time-badge">2023.09 - 至今</span>
                        <p>软件技术（大专） | 专业排名：7/136</p>
                        <p class="highlight">主修课程: Java编程、数据库原理、Web开发、数据结构与算法、网页制作基础任务教程、python快速编程入门、JavaScript+jQuery程序设计开发实战、人工智能基础等</p>
                    </div>
                </div>
                {% endif %}
            </div>
        </section>

        <!-- 项目经历 -->
        <section id="projects" class="info-card">
            <h2 class="section-title">🚀 项目经历</h2>
            <div class="content-frame main-border">
                {% if resume_data.projects %}
                    {{ resume_data.projects|safe }}
                {% else %}
                <div class="project-card accent-border">
                    <div class="card-header">
                        <h3>电商网站开发</h3>
                        <span class="score-badge">96/100</span>
                    </div>
                    <div class="tech-stack">
                        <span>HTML5</span>
                        <span>CSS3</span>
                        <span>JavaScript</span>
                    </div>
                    <ul class="project-detail">
                        <li>独立开发4个核心页面（首页/列表页/详情页/登录页）</li>
                        <li>实现商品分类筛选、用户评价交互功能</li>
                        <li>使用Flex布局实现响应式设计，加载速度优化30%</li>
                    </ul>
                </div>
                {% endif %}
            </div>
        </section>

        <!-- 专业技能 -->
        <section id="skills" class="info-card">
            <h2 class="section-title">🔧 专业技能</h2>
            <div class="content-frame grid-2col main-border">
                {% if resume_data.skills %}
                    {{ resume_data.skills|safe }}
                {% else %}
                <div class="skill-card accent-border">
                    <h3>技术栈</h3>
                    <ul class="skill-list">
                        <li>HTML5/CSS3 <progress value="85" max="100"></progress></li>
                        <li>JavaScript <progress value="75" max="100"></progress></li>
                        <li>Vue框架 <progress value="65" max="100"></progress></li>
                        <li>DIV+CSS布局 <progress value="90" max="100"></progress></li>
                    </ul>
                </div>
                
                <div class="skill-card accent-border">
                    <h3>认证与荣誉</h3>
                    <ul class="cert-list">
                        <li>📜 全国计算机一级证书</li>
                        <li>🏅 信息素养大赛三等奖</li>
                        <li>🎖️ 2023-2024学年奖学金</li>
                        <li>🗣️ 普通话二级乙等</li>
                    </ul>
                </div>
                {% endif %}
            </div>
        </section>

        <!-- 联系信息 -->
        <section id="contact" class="info-card">
            <h2 class="section-title">📞 联系信息</h2>
            <div class="content-frame grid-3col main-border">
                {% if resume_data.contact %}
                    {{ resume_data.contact|safe }}
                {% else %}
                <div class="contact-item accent-border">
                    <div>📱 手机</div>
                    <a href="tel:13976831049">139-7683-1049</a>
                </div>
                <div class="contact-item accent-border">
                    <div>📧 邮箱</div>
                    <a href="mailto:3036889416@qq.com">3036889416@qq.com</a>
                </div>
                <div class="contact-item accent-border">
                    <div>🏫 院校</div>
                    <span>海南经贸职业技术学院官网：</span>
                    <a href="https://hceb.edu.cn/">https://hceb.edu.cn/</a>
                </div>
                <div class="contact-item accent-border">
                    <div>😶‍🌫️源代码仓库地址</div>
                    <a href="https://gitee.com/yue20050911/my-profile_1.git">https://gitee.com/yue20050911/my-profile_1.git</a>
                </div>
                {% endif %}
            </div>
        </section>
        
        <button class="print-btn" onclick="window.print()">🖨️ 打印简历</button>
    </main>

    <footer class="footer-card">
        <div class="footer-content">
            © 2024 符嘉月 
        </div>
    </footer>
    <script>
        function resetResume() {
            fetch('/reset', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    window.location.href = data.redirect;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('恢复失败，请刷新页面');
            });
        }
        </script>
</body>
</html>